<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="app">
    <p>v-once指令:变量只赋值一次</p>
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <p v-once="msg">{{msg}}</p>
    <hr>
    <p>v-for指令：循环显示数组、对象、整数中的内容</p>
    <p>
      闪电五连鞭：
      <!-- item是数组中的每一项（必填），arr1是被循环的数组,
      如果只有一个参数就是item，如果有两个，那么第一个是item，第二个是index -->
      <span v-for="item in arr1">第{{item}}招</span>
    </p>
    <p>
      我的爱好：
      <span v-for="hobby in arr2">{{hobby}}、</span>
    </p>
    <p>
      v-for循环数组：闪电五连鞭：
      <span v-for="(item,index) in arr3" v-bind:key="'arr' + index">{{index + 1}}. {{item.name}}</span>
    </p>
    <hr>
    <p>v-for循环对象：马老师：</p>
    <!-- attr是对象的属性值，obj1被循环的对象 -->
    <!-- 第一个参数是属性值（必填），第二个参数的属性，第三个参数是下标 -->
    <span v-for="(val,attr,index) in obj1" :key="'obj'+index">{{index + 1}}. {{attr}}:{{val}}<br></span>
    <hr>
    <p>v-for循环整数</p>
    <span v-for="num in 9">{{num}}</span>
    <!-- v-for中key的作用：key的值需要唯一，它是节点（node）的编号，key值和node一一对应。如果需要更新节点，可以通过key直接找到改节点，直接更新，从而提高效率。 -->
    <hr>
    <p>v-model指令：</p>
    <input type="text" v-model="msg">
    <hr>
    <p>v-on指令：</p>
    <!-- <button v-on:click="money ++">充值</button> -->
    <button @click="addMoney">充值</button>
    <p>{{money}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '.app',
      data: {
        msg: 666777,
        money: 1,
        arr1: [1,2,3,4,5],
        arr2: ['唱','跳','rap','打篮球'],
        arr3: [
          {name: '平沙落雁'},
          {name: '白鹤亮翅'},
          {name: '飞龙在天'},
          {name: '举火烧天'},
          {name: '泰山压顶'}
        ],
        obj1: {
          name: '马老师',
          job: '掌门人',
          age: 69,
          talk: '耗子尾汁'
        }
      },
      // 方法，将所有的函数都写在这里
      methods: {
        addMoney() {
          this.money ++;
          console.log(this.money);
        }
      },
    });
  </script>
</body>
</html>